﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>X.509 certificate's complex example</title>

    <script type="module" src="es6.js"></script>

    <script>
		function onload()
		{
			document.getElementById('cert-file').addEventListener('change', handleFileBrowse, false);
			document.getElementById('inter_certs').addEventListener('change', handleInterCertsFile, false);
			document.getElementById('trusted_certs').addEventListener('change', handleTrustedCertsFile, false);
			document.getElementById('crls').addEventListener('change', handleCRLsFile, false);
			document.getElementById('ca_bundle').addEventListener('change', handleCABundle, false);

			document.getElementById('hash_alg').addEventListener('change', handleHashAlgOnChange, false);
			document.getElementById('sign_alg').addEventListener('change', handleSignAlgOnChange, false);

			document.getElementById('id_create').addEventListener('click', createCertificate, false);
			document.getElementById('id_verify').addEventListener('click', verifyCertificate, false);
		}
    </script>

    <style type="text/css">
        body{background:#EFEFEF;font:normal 14px/16px Helvetica, Arial, sans-serif;}
        .wrapper{
            width:600px;
            margin:50px auto;
            padding:50px;
            border:solid 2px #CCC;
            border-radius:10px;
            -webkit-border-radius:10px;
            box-shadow:0 0 12px 3px #CDCDCD;
            -webkit-box-shadow:0 0 12px 3px #CDCDCD;
            background:#FFF;
        }
        label{
            font:bold 16px/20px Helvetica, Arial, sans-serif;
            margin:0 0 8px;
        }
        textarea{
            width:500px;
            border:solid 1px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            height:340px;
            font:normal 12px/15px monospace;
            display:block;
            margin:0 0 12px;
            box-shadow:0 0 5px 5px #EFEFEF inset;
            -webkit-box-shadow:0 0 5px 5px #EFEFEF inset;
            padding:20px;
           resize: none;
        }
        a{
            display:inline-block;
            padding:5px 15px;
            background:#ACD0EC;
            border:solid 1px #4C6181;
            color:#000;
            font:normal 14px/16px Helvetica, Arial, sans-serif;
        }
        a:hover{
            background:#DAEBF8;
            cursor:pointer;
        }
        .header-block {
            margin-top:30px;
            font:bold 16px/20px Helvetica, Arial, sans-serif;
        }
        .border-block{
            border:solid 2px #999;
            border-radius:5px;
            -webkit-border-radius:5px;
            margin:10px 0 0;
            padding:20px 30px;
            background:#F0F4FF;
        }
        .border-block h2{
            margin:0 0 16px;
            font:bold 22px/24px Helvetica, Arial, sans-serif;
        }
        .border-block p{
            margin:0 0 12px;
        }
        .border-block p .type{
            font-weight:bold;
            display:inline-block;
            width:176px;
        }
        .border-block .two-col{
            overflow:hidden;
            margin:0 0 16px;
        }
        .border-block .two-col .subject{
            width:180px;
            font-weight:bold;
            margin:0 0 12px;
            float:left;
        }
        .border-block .two-col #cert-attributes{
            margin:0;
            padding:0;
            float:left;
            list-style:none;
        }
        .border-block .two-col #cert-attributes li p{
            margin:0;
        }
        .border-block .two-col #cert-attributes li p span{
            width:40px;
            display:inline-block;
            margin:0 0 5px;
        }
        .border-block .two-col #cert-exten{
            overflow:hidden;
            padding:0 0 0 17px;
            margin:0;
            list-style-type:square;
        }
        table {
            border:solid;
            border-collapse:collapse;
            border-color:black;
        }
       th { 
        text-align:center;
        background: #ccc;
        padding: 5px;
        border: 1px solid black;
       }
       td { 
        padding: 5px;
        border: 1px solid black; 
       }
    </style>
</head>

<body onload="onload()">
    <div class="wrapper">

        <p class="header-block">Create new X.509 certificate</p>
        <div id="output_div" class="border-block">
            <p>
                <label for="hash_alg" style="font-weight:bold">Hashing algorithm:</label>
                <select id="hash_alg">
                    <option value="alg_SHA1">SHA-1</option>
                    <option value="alg_SHA256">SHA-256</option>
                    <option value="alg_SHA384">SHA-384</option>
                    <option value="alg_SHA512">SHA-512</option>
                </select>
            </p>
            <p>
                <label for="sign_alg" style="font-weight:bold">Signature algorithm:</label>
                <select id="sign_alg">
                    <option value="alg_RSA15">RSASSA-PKCS1-v1_5</option>
                    <option value="alg_RSA2">RSA-PSS</option>
                    <option value="alg_ECDSA">ECDSA</option>
                </select>
            </p>
            <label for="new_signed_data" style="font-weight:bold;float:left;">BASE-64 encoded new certificate + PKCS#8 private key:</label>
            <textarea id="new_signed_data">&lt;  New encoded certificate + PKCS#8 exported private key will be stored here &gt;</textarea>
            <a id="id_create">Create</a>
        </div>

        <p class="header-block">Parse loaded/created X.509 certificate</p>
        <div id="cert-data-block" class="border-block">
            <p>
                <label for="cert-file">Select binary X.509 cert file:</label>
                <input type="file" id="cert-file" title="X.509 certificate" />
            </p>
            <div id="cert-issuer-div" class="two-col">
                <p class="subject">Issuer:</p>
                <table id="cert-issuer-table"><tr><th>OID</th><th>Value</th></tr></table>
            </div>
            <div id="cert-subject-div" class="two-col">
                <p class="subject">Subject:</p>
                <table id="cert-subject-table"><tr><th>OID</th><th>Value</th></tr></table>
            </div>
            <p><span class="type">Serial number:</span> <span id="cert-serial-number"></span></p>
            <p><span class="type">Issuance date:</span> <span id="cert-not-before"></span></p>
            <p><span class="type">Expiration date:</span> <span id="cert-not-after"></span></p>
            <p><span class="type">Public key size (bits):</span> <span id="cert-keysize"></span></p>
            <p><span class="type">Signature algorithm:</span> <span id="cert-sign-algo"></span></p>
            <div id="cert-extn-div" class="two-col" style="display:none;">
                <p class="subject">Extensions:</p>
                <table id="cert-extn-table"><tr><th>OID</th></tr></table>
            </div>
        </div>

        <p class="header-block">Verify loaded/created X.509 certificate</p>
        <div id="add-cert-block" class="border-block">
            <div class="border-block" style="margin-bottom: 15px;">
                <p>
                    <label for="ca_bundle">Load "CA bundle":</label>
                    <input type="file" id="ca_bundle" title="Load CA bundle" />
                </p>
                <p>OR</p>
                <p>
                    <label for="trusted_certs">Select trusted certs (binary):</label>
                    <input type="file" id="trusted_certs" title="Load trusted certs" multiple="multiple" />
                </p>
            </div>
            <p>
                <label for="inter_certs">Load intermediate certificates (binary):</label>
                <input type="file" id="inter_certs" title="Load interm. certs" multiple="multiple" />
            </p>
            <p>
                <label for="crls">Load CRLs (binary):</label>
                <input type="file" id="crls" title="Load CRLs" multiple="multiple" />
            </p>
            <a id="id_verify">Verify</a>
        </div>
    </div>
</body>
</html>